<script setup>
	// 此处使用编译器宏函数defindProps，接收属性传值
	// template模板中直接使用，
	// script脚本中使用 props.message使用
	const props = defineProps({
		message: String
	})
	console.log(props.message);
	
	// 子传父 
	// 在子组件中，通过emit触发事件，
	// 在父组件中，使用@来监听事件
	// 申明emit方法，先使用编译器宏函数defindEmit申明方法
	const emit = defineEmits(['changeMessage'])
	
	const clickMessage = ()=>{
		// emit(自定义事件名, 参数);
		emit('changeMessage', 'vue3'===props.message? 'VUE3' : 'vue3');
	}
	
	// 子组件 想要把属性或函数在父组件中可以访问，需要使用defineExpose
	const text = '苹果';
	defineExpose({text, clickMessage});
	
	// inject接收 provide的数据
	import {inject} from 'vue';
	const value = inject('name');
	console.log('跨层级传递数据 provide 与 inject =', value);
	const changeName = inject('changeName');
	changeName('哈哈');
</script>

<template>
	<div>
		我是子组件，父传子:{{message}}
	</div>
	<button @click="clickMessage">子传父</button>
</template>

<style>
</style>